2<template>
	<view class="home-container">
		<h-card title="本月事项" margin="0 0 30rpx 0">
			<view class="charts-box">
			    <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</h-card>
		<h-card title="操作入口" margin="0 0 20rpx 0">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item :index="0" @click="handleTo('/pages_sub1/components/index')">
					<view class="grid-icon">
						<h-badge size="normal" :text="dot.a" absolute="rightTop" :offset="[7, 7]" type="error">
							<image class="image-icon" src="@/static/image/home/xfjc.png"/>
						</h-badge>
					</view>
					<view class="grid-text">功能组件</view>
				</u-grid-item>
				<u-grid-item :index="0" @click="handleTo('/pages_sub1/jsLib/index')">
					<view class="grid-icon">
						<h-badge size="normal" :text="dot.b" absolute="rightTop" :offset="[7, 7]" type="error">
							<image class="image-icon" src="@/static/image/home/zxjc.png"/>
						</h-badge>
					</view>
					<view class="grid-text">Js库</view>
				</u-grid-item>
				<u-grid-item :index="0" @click="handleTo('/pages_sub1/yeWu/index')">
					<view class="grid-icon">
						<h-badge size="normal" :text="dot.c" absolute="rightTop" :offset="[7, 7]" type="error">
							<image class="image-icon" src="@/static/image/home/wgjsq.png"/>
						</h-badge>
					</view>
					<view class="grid-text">业务代码</view>
				</u-grid-item>
				<u-grid-item :index="0" @click="handleTo('/pages_sub1/map/index')">
					<view class="grid-icon">
						<h-badge size="normal" :text="dot.d" absolute="rightTop" :offset="[7, 7]" type="error">
							<image class="image-icon" src="@/static/image/home/online.png"/>
						</h-badge>
					</view>
					<view class="grid-text">地图</view>
				</u-grid-item>
			</u-grid>
		</h-card>
		<!-- <h-tarbar></h-tarbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData:{},
				opts:{
					legend: {show: false},
					padding: [15,5,10,5],
				},
				//事件数
				dot: {
					a:5,
					b:2,
					c:1,
					d:1
				},
				barData:{
				    a:11,
					b:13,
					c:16,
					d:9
				}
			}
		},
		onLoad() {
			// uni.hideTabBar()
			console.log('userInfo',this.userInfo)
		},
		onShow() {
			let _ = this
			_.getHomeData()
		},
		methods: {
			async getHomeData(){
				let _ = this
				_.getChartData()
			},
			getChartData(){
				let _ = this
				_.chartData={}
				let res = {
					categories: ["a","b","c","d"],
					series: [
					  {
						name: "事项数",
						data: [
								{"value": _.barData.a,"color":"#FFA120"},
								{"value": _.barData.b,"color":"#0D82DD"},
								{"value": _.barData.c,"color":"#27E0EC"},
                            	{"value": _.barData.d,"color":"#999"}
                        ]
					  }
					]
				  }
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			handleTo(url) {
				uni.navigateTo({url: url})
			},
		}
	}
</script>

<style lang="scss" scope>
@import 'index.scss';
</style>

